<template>
  <div>
      <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size:30px;margin-left:40%">评论</span>
        <el-divider></el-divider>
        <div v-for="discuss in discussList" :key="discuss.discussId"> 
          <el-row :gutter="20">
          <el-col :span="17">{{discuss.content}}</el-col>
          <el-col :span="3"><el-image :key="discuss.discussId" v-if="userObj.status == 1 && loadImg(discuss.discussId) == 'ok'" :src=url2 @click="changeZan(discuss.discussId)"></el-image>
          <el-image :key="discuss.discussId + d" v-if="userObj.status == 1 && loadImg(discuss.discussId) == 'no'" :src=url1 @click="changeZan(discuss.discussId)"></el-image></el-col>
          <el-col :span="2">{{discuss.number}}</el-col>
        </el-row>
        <el-divider></el-divider>
        </div>
      </div>
      </el-card>
  
  </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from "vuex";
export default {
  computed:{
    ...mapState("discuss",["discussList"]),
    ...mapState("user",["userObj"])
  },
  data(){
    return{
      url1:require('../../assets/zan.png'),
      url2:require('../../assets/zan_active.png')
    }
  },
  methods:{
    loadImg(discussId){

      var array = [];
      var list = this.userObj.data.discussBeans;
      for(var i = 0;i < list.length;i++){
        array.push(list[i].discussId)
      }
      // console.log(array)
      if(array.indexOf(discussId) == -1){
        return "no";
      } else {
        return "ok";
      }
    },
    async checkFavor(discussId){
      var obj = await this.ajax.getSubmit("/project/users/checkFavor",{discussId:discussId});
    },
    ...mapActions("discuss",["findDiscuss"]),
    ...mapActions("user",["getUser"]),

    async changeZan(discussId){
      var obj = await this.ajax.getSubmit("/project/users/checkFavor",{discussId:discussId})
      if(obj.data == "ok"){
        this.deleteFavor(discussId)
      }
      if(obj.data == "no"){
        this.addFavor(discussId)
      }
      this.findDiscuss();
      this.loadImg(discussId)
    },
    async addFavor(discussId){
      var obj = await this.ajax.postSubmit("/project/discuss/addFavor",{discussId:discussId});
    },
    async deleteFavor(discussId){
      await this.ajax.postSubmit("/project/discuss/deleteFavor",{discussId:discussId});
    }
  },
  created(){
    this.getUser();
    this.findDiscuss();
  }
}
</script>

<style>
/* .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  } */
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>